<!--
 * @Descripttion: 右侧选中的数据
 * @version: V1.0.0
 * @Author: Shuangshuang Song
 * @LastEditors: ZhiChao Lin
 * @Date: 2020-05-23 15:25:34
 * @LastEditTime: 2020-12-04 17:37:54
-->
<template>
  <div class="selected-person">
    <div class="persons-header">
      <el-input
        :placeholder="$t('PlaceHolder')"
        v-model="filterKey"
        @change="doSearch"
        prefix-icon="el-icon-search"
        size="small"
        class="search-input"
        clearable
        autocomplete
      />
      <i
        @click="toggleType('list')"
        :class="{'activated': showType == 'list'}"
        class="jeicon jeicon-product-list"
      />
      <i
        @click="toggleType('tag')"
        :class="{'activated': showType == 'tag'}"
        class="jeicon jeicon-all"
      />
    </div>
    <div
      v-show="showType == 'tag'"
      class="person-list"
    >
      <draggable v-model="selections">
        <transition-group>
          <li
            v-for="(item, index) in selections"
            :key="index"
            :class="{'person-item-nodelete': params.ishowerroricon == false}"
            class="person-item"
          >
            <span :class="item.bean.STATUS != '1' ? 'name-disable' : ''">
              {{ item.text }}
            </span>
            <i
              v-if="!(params.ishowerroricon == false)"
              @click="deleteData(item, index)"
              class="jeicon jeicon-error"
            />
          </li>
        </transition-group>
      </draggable>
    </div>
    <div
      v-show="showType == 'list'"
      class="person-table"
    >
      <el-table
        :data="resolveSelections"
        :height="'100%'"
        style="width: 100%"
        row-key="id"
      >
        <el-table-column
          label=""
          width="60"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <span
              v-html="scope.row.header"
              class="headerImg"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          width="80"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <!-- <el-tooltip
              :content="scope.row.text"
              placement="top"
              popper-class="person-tootip"
            > -->
            <span :class="scope.row.bean.STATUS != '1' ? 'name-disable' : ''">{{ scope.row.text }}</span>
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column
          label="账号"
          width="120"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <!-- <el-tooltip
              :content="scope.row.account"
              popper-class="person-tootip"
              placement="top"
            > -->
            <span>{{ scope.row.account }}</span>
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column
          label="部门"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <!-- <el-tooltip
              :content="scope.row.deptname"
              popper-class="person-tootip"
              placement="top"
            > -->
            <span>{{ scope.row.deptname }}</span>
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column
          label="职务"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <!-- <el-tooltip
              :content="scope.row.duty"
              popper-class="person-tootip"
              placement="top"
            > -->
            <span>{{ scope.row.duty }}</span>
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="50"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click="deleteData(scope.row, scope.$index)"
              type="text"
              style="padding: 0"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-btn">
      <span class="left-selects">{{ $t('selected') }} {{ selections.length }}</span>
      <span class="right-btns">
        <el-button
          @click="oneKey2Group"
          type="text"
        >{{ $t('transitiongroup') }}</el-button>
        <el-button
          @click="clearSelection"
          v-if="!(params.showClearAllBtn == false)"
          type="text"
        >{{ $t('clear') }}</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import Sortable from 'sortablejs';

export default {
  name: 'SelectedPerson',
  components: { draggable },
  props: {
    selections: {
      type: Array,
      default: () => [],
    },
    cloneSelections: {
      type: Array,
      default: () => [],
    },
    params: {
      type: Object,
      default: () => {},
    },
    treeDataLength: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      showSetNameDialog: false,
      filterKey: '',
      showType: 'tag', // 已选人员展示类型， tag = tag形式   list = 列表形式
      newSortable: null,
      cloneDatas: Ext.clone(this.selections),
    };
  },
  computed: {
    resolveSelections() {
      const { selections } = this;
      selections.forEach((item) => {
        item.header = JE.getUserPhoto(item.id, true);
        item.account = item.bean.CODE || item.bean.USERCODE || '暂无';
        item.duty = item.bean.EXECUTIVENAME || '暂无';
        item.deptname = item.bean.DEPTNAME || '暂无';
      });
      return selections;
    },
  },
  mounted() {
    if (!this.newSortable && document.querySelector('.el-table__body-wrapper tbody')) {
      this.rowDrop();
    }
    // 人员头像处理
    const me = this;
    if (!JE.isNotEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        const list = Ext.clone(me.selections);
        me.selections = [];
        me.selections = list;
      });
    }
  },
  methods: {
    // 关键字匹配查询
    doSearch(queryString) {
      const { cloneSelections } = this;
      this.selections = queryString ? cloneSelections.filter(this.createFilter(queryString)) : cloneSelections;
    },
    // 过滤方法
    createFilter(queryString) {
      return (data) => {
        const keyword = queryString.toLowerCase();
        const text = data.text.toLowerCase();
        const pinyin = JE.toPinYin(text, 'pinyin');
        return text.indexOf(keyword) > -1 || pinyin.indexOf(keyword) > -1;
      };
    },
    // 切换展示类型
    toggleType(type) {
      this.showType = type || 'tag';
      if (!this.newSortable && type == 'list') {
        this.$nextTick(() => {
          this.rowDrop();
        });
      }
    },
    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this;
      this.newSortable = Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.selections.splice(oldIndex, 1)[0];
          _this.selections.splice(newIndex, 0, currRow);
        },
      });
    },
    // 一键转工作组
    oneKey2Group() {
      if (this.treeDataLength > 49) {
        return JE.msg(this.$t('groupLimit'));
      }
      if (this.selections.length < 1) {
        return JE.msg(this.$t('choosePerson'));
      }
      const ids = [];
      this.selections.forEach((item) => {
        ids.push(item.id);
      });
      this.$emit('toGroup', ids);
    },
    // 删除
    deleteData(em, index) {
      this.$emit('removePerson', em, index);
    },
    // 清空
    clearSelection() {
      this.$emit('clearAll');
    },
  },
};
</script>
<style lang="scss">
.person-tootip {
  z-index: 9999999 !important;
}
.selected-person {
  height: 100%;
  padding-bottom: 40px;
  position: relative;
  .persons-header {
    display: flex;
    align-items: center;
    overflow: hidden;
    .search-input {
      flex: 1;
      float: left;
      .el-input__inner {
        background-color: #F5F7FA;
        border-radius: 16px;
      }
    }
    .jeicon {
      float: right;
      font-size: 20px;
      color: #666;
      margin-left: 15px;
      cursor: pointer;
      &.activated {
        color: #306CD0;
      }
    }
  }
  .person-table {
    .headerImg {
      display: flex;
    }
    .el-table {
      td {
        padding: 6px 0;
        .cell {
          color: #919090;
        }
      }
      .cell {
        white-space: nowrap;
      }
      th>.cell {
        font-weight: 500;
        color: #333;
      }
      &::before {
        height: 0;
      }
    }
  }
  .person-list {
    overflow-y: auto;
    .person-item {
      list-style: none;
      display: inline-block;
      min-width: 90px;
      text-align: left;
      padding: 5px 30px 5px 10px;
      position: relative;
      background-color: #f4f6f9;
      border-radius: 4px;
      margin: 15px 15px 0 0;
      .jeicon-error {
        position: absolute;
        right: 10px;
        top: 4px;
        cursor: pointer;
        &:hover {
          color: #2f6bcf;
        }
      }
      &:hover {
        cursor: move;
      }
    }
    .person-item-nodelete {
      text-align: center;
      padding-right: 10px;
    }
  }
  .name-disable {
    text-decoration: line-through;
    color: #a9aba9;
  }
  .bottom-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    .left-selects {
      float: left;
      padding: 12px 0;
      line-height: 1;
    }
    .right-btns {
      float: right;
      .el-button--text {
        color: #2f6bcf;
        &:hover {
          color: #6696e9;
        }
      }
    }
  }
}
</style>
